<template>
  <div>
    <!-- 标题-->
    <div>
      <a-page-header title="学生列表" />
    </div>

    <!--下面的div包括下拉框，搜索框，按钮等控件-->
    <div>
      <a-form layout="inline" :form="form" :labelCol="{
        md:{span:4},
        xs:{span:12}
      }" :wrapperCol="{
        md:{span:4},
        xs:{span:12}
      }">
        <a-form-item label="年级">
          <a-select
              placeholder="请选择年级"
              @focus="getGrades"
              v-model="selectGrade"
              style="width: 200px"
              :allowClear="true"
          >
            <a-select-option :value="i" v-for="i in grades" :key="i">
              {{i+'级'}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="专业" >
          <a-select
              placeholder="请选择专业"
              @focus="getMajors"
              v-model="selectMajor"
              style="width: 200px"
              :allowClear="true"
          >
            <a-select-option :value="i" v-for="i in majors" :key="i">
              {{i}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="班号">
          <a-select
              placeholder="请选择班号"
              @focus="getClassNumbers"
              style="width: 200px"
              :allowClear="true"
              v-model="classNumber"
          >
            <a-select-option :value="i" v-for="i in classNumbers" :key="i">
              {{i+'班'}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input v-model="stuNumber" placeholder="请输入学号查询" style="width: 250px;" :allowClear="true">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="name" placeholder="请输入名字查询" style="width: 250px;" :allowClear="true">
          </a-input>
        </a-form-item>
        <a-form-item>
          <div style="width: 500px; margin: 10px;">
            <a-button type="primary" style="margin-right: 10px;" @click="onQueryStudentInfo">
              查询
            </a-button>
<!--            <a-button style="margin-right: 10px;" @click="onResetSearch">重置</a-button>-->
            <a-button type="primary" style="margin-right: 10px;" @click="addStudent">
              添加
            </a-button>
            <a-popconfirm
                title="是否批量删除选中的学生信息?"
                @confirm="() => onMassDelete()"
                cancelText='取消'
                okText="确定"
                placement="bottom"
            >
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a-button type="danger">批量删除</a-button>
            </a-popconfirm>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <!--表格-->
    <div>
      <a-table
          :row-selection="rowSelection"
          :columns="columns"
          :data-source="dataResource"
          :pagination="pagination"
      >
        <template slot="operation" slot-scope="text,record">
          <!-- 点击通过弹出的确认框-->
          <a-popconfirm
              v-if="dataResource.length"
              title="你确定要删除这个学生信息吗?"
              @confirm="() => onDelete(record.key)"
              cancelText='取消'
              okText="确定"
              placement="bottom"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red"/>
            <a href="javascript:;" style="color: red">删除</a>
          </a-popconfirm>
          <span class="seize"/>

          <a href="javascript:;" @click="onCheck(record.key)">查看</a>
          <span class="seize"/>

          <!-- 点击驳回弹出的确认框-->
          <a-popconfirm
              v-if="dataResource.length"
              title="是否将学生密码重置为学号?"
              @confirm="() => onReset(record.key)"
              cancelText='取消'
              okText="确定"
              placement="bottom"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red"/>
            <a href="javascript:;">重置学生密码</a>
          </a-popconfirm>
        </template>
      </a-table>
      <!-- 点击查看弹出的对话框-->
      <a-modal
          title="学生详细信息"
          :visible="visible"
          :destroyOnClose="true"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <div>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              账号：{{this.userState.studentInfo.simpleStudentInfo.account}}
            </a-col>
            <a-col :span="12">
              密码：{{this.userState.studentInfo.simpleStudentInfo.password}}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              姓名：{{this.userState.studentInfo.simpleStudentInfo.name}}
            </a-col>
            <a-col :span="12">
              昵称：{{this.userState.studentInfo.alias}}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              学校：{{this.userState.studentInfo.simpleStudentInfo.school}}
            </a-col>
            <a-col :span="12">
              学号：{{this.userState.studentInfo.simpleStudentInfo.stuNumber}}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              学院：{{this.userState.studentInfo.college}}
            </a-col>
            <a-col :span="12">
              班级：{{this.userState.studentInfo.className}}
            </a-col>
          </a-row>
          <a-row :gutter="['24','24']">
            <a-col :span="12">
              电话号码：{{this.userState.studentInfo.phone}}
            </a-col>
            <a-col :span="12">
              邮箱：{{this.userState.studentInfo.email}}
            </a-col>
          </a-row>
        </div>
      </a-modal>
      <addStudent ref="addSt" @get="refreshPage" ></addStudent>
    </div>
  </div>
</template>

<script>
//列名数组addStu

const columns = [
  {
    title: '学号',
    dataIndex: 'stuNumber',
    align: 'center',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center',

  },
  {
    title: '密码',
    dataIndex: 'password',
    align: 'center',

  },
  {
    title: '学校',
    dataIndex: 'school',
    align: 'center',

  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    align: 'center',
  }
];

import { mapState } from 'vuex'
import addStudent from "./AddStu.vue";
export default {
  name: "Stulisttable",
  components: {addStudent},
  data() {
    return {
      //年级专业班号+查询条件
      grades:[],
      selectGrade:undefined,
      majors:[],
      selectMajor:undefined,
      classNumbers:[],
      classNumber:undefined,
      stuNumber:'',
      name:'',

      //表格数据
      columns,
      dataResource:[],

      //表格分页数据源和事件监听
      pagination: {
        //current和pageSize负责记录操作时在第几页和显示几条数据
        current:1,
        pageSize:10,
        //可选择的pageSize
        pageSizeOptions: ['5', '10', '15', '20'],
        //数据总数
        total:0,
        //默认的pageSize
        defaultPageSize:10,
        //数据总数如何显示
        showTotal: total=>'总共'+total+'条学生信息',
        //是否在分页中显示pageSize能否改变的选项
        showSizeChanger: true,
        //current 和 pageSize 改变时触发的事件
        onShowSizeChange: (current, pageSize) => this.onChangePage(current, pageSize),
        onChange: (page,pageSize)=> this.onChangePage(page,pageSize)
      },
      selectedRowKeys: [],
      //是否加载
      loading: true,
      //默认分页数据
      defaultCurrentPage: 1,
      defaultRows: 10,
      //弹出框是否可见
      visible:false,
      form: this.$form.createForm(this, { name: 'student_search' }),
    }
  },
  mounted() {
    console.log(this.accessState.collegeId)
    //页面刚加载时调用一次接口
    this.$store.dispatch('user/getSimpleStudentInfo',{
      //toekn 和 colllegeId 从 accessState中获取
      token: this.accessState.token,
      collegeId: this.accessState.collegeId,
      rows: this.defaultRows,
      currentPage: this.defaultCurrentPage
    }).then(() => {
      //调用成功，结果返回
      this.dataResource=this.userState.simpleStudentInfo;
      this.pagination.total=this.userState.count;
    }).catch((err) => {
      this.$message.error(err.msg)
    })
  },
  methods: {
    addStudent(){ // 添加学生
      this.$refs.addSt.showModel();
    },
    getGrades(){
      this.$store.dispatch('user/getGrades',{
        token:this.accessState.token,
        collegeId:this.accessState.collegeId
      }).then(res=>{
          this.grades=res.data
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    getMajors(){
        this.$store.dispatch('user/getMajors',{
          token:this.accessState.token,
          collegeId:this.accessState.collegeId,
          grade:this.selectGrade===undefined ? '':this.selectGrade
        }).then(res=>{
          this.majors=res.data
        }).catch(error=>{
          this.$message.error(error)
        })
    },
    getClassNumbers(){
      this.$store.dispatch('user/getClassNumbers',{
        token:this.accessState.token,
        collegeId:this.accessState.collegeId,
        grade:this.selectGrade===undefined ? '':this.selectGrade,
        major:this.selectMajor===undefined ? '':this.selectMajor
      }).then(res=>{
        this.classNumbers=res.data
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    //分页改变时发送请求
    onChangePage(current, pageSize){
       //console.log(this.name)
      // console.log(pageSize)
      //修改分页数据
      this.pagination.current=current;
      this.pagination.pageSize=pageSize;
      //调用接口
      this.$store.dispatch('user/queryStudentInfo',{
        token: this.accessState.token,
        collegeId: this.accessState.collegeId,
        rows: pageSize,
        currentPage: current,
        searchStudentInfo:{
          grade:'',
          major:'',
          classNumber:'',
          stuNumber:'',
          name:''
        }
      }).then(() => {
        //返回成功
        this.dataResource=this.userState.simpleStudentInfo;
        this.pagination.total=this.userState.count;
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    //点击查询发送请求
    onQueryStudentInfo(){
      this.$store.dispatch('user/queryStudentInfo',{
        token: this.accessState.token,
        collegeId: this.accessState.collegeId,
        rows: this.pagination.pageSize,
        currentPage: this.defaultCurrentPage,//从第一页开始
        searchStudentInfo:{
          grade:this.selectGrade,
          major:this.selectMajor,
          classNumber:this.classNumber,
          stuNumber:this.stuNumber,
          name:this.name
        }
      }).then(() => {
        //返回成功
        this.dataResource=this.userState.simpleStudentInfo;
        this.pagination.total=this.userState.count;
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    //删除某个学生
    onDelete(key){
      this.$store.dispatch('user/deleteStu',{
        token:this.accessState.token,
        studentID:key
      }).then(data=>{
        if(data.code===1){
          this.$message.info("操作成功")
          //再次查询
          this.onChangePage(this.defaultCurrentPage,this.pagination.pageSize)
        }
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    //查看某个学生
    onCheck(key){
      //调用接口
      this.$store.dispatch('user/checkStuInfo',{
        token: this.accessState.token,
        studentID: key
      }).then(() => {
        //获取成功
        this.visible=true;
      }).catch((err) => {
        this.$message.error(err.msg)
      })

    },
    //重置某个学生
    onReset(key){
      this.$store.dispatch('user/resetStuPwd',{
        token: this.accessState.token,
        studentID: key
      }).then(() => {
        this.$message.info("操作成功")
        //再次查询
        this.onChangePage(this.pagination.current,this.pagination.pageSize)
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    //批量删除某个学生
    onMassDelete(){
      this.$store.dispatch('user/massDeleteStuRecord',{
        token:this.accessState.token,
        studentIDs:this.selectedRowKeys
      }).then(()=>{
        this.onChangePage(this.pagination.defaultPageSize,this.pagination.pageSize)
        this.$message.info("操作成功")
      }).catch(error=>{
        this.$message.error(error)
      })
    },
    //弹出的对话框的确定取消按钮点击时，调用该事件
    handleOk(){
      this.visible=false;
    },
    handleCancel(){
      this.visible=false;
    },
    // onResetSearch(){
    //   this.selectGrade=undefined
    //   this.selectMajor=undefined
    //   this.classNumber=undefined
    //   this.stuNumber=''
    //   this.name=''
    // },
    refreshPage(){
      // 重新刷新当前页面
      // console.log("刷新")
      window.location.reload()
    }
  },

  computed: {
    ...mapState({ // 这个是提取store中access文件夹目录下的数据
      'accessState': 'access',
      'userState':'user'
    }),
    rowSelection(){
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys=>{
          this.selectedRowKeys = selectedRowKeys;
        }
      }
    }
  }
}
</script>

<style scoped>
.seize{
  margin-left: 1em;
}
</style>

